<!-- 地图 -->
<template>
  <div class="page-box h100 display-flex czbj pr">
    <div id="container" class="map" tabindex="0"></div>

    <div class="kxzczfsdrfsdf">
      <div id="pickerBox">
        <input id="pickerInput" placeholder="输入关键字选取地点" />
        <div id="poiInfo"></div>
      </div>
      <div class="display-flex">
        <div class="vertical-center">店铺地址：</div>
        <div class="flex-1">
          {{ dikjxzx }}
          <!-- <n-input
            v-model:value="dikjxzx"
            type="textarea"
            placeholder=""
            size="medium"
            clearable
          ></n-input> -->
        </div>
      </div>
      <div class="display-flex mt10">
        <div class=" ">坐标：</div>
        <div class="flex-1">
          {{ zb }}
        </div>
      </div>
      <div class="mt10 cen">
        <n-button type="primary" size="medium" @click="success">确认</n-button>
        <n-button type="error" size="medium" @click="closert" class="ml10"
          >关闭</n-button
        >
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { nextTick, ref, defineEmits } from "vue";
const dikjxzx = ref();
const zb = ref();
const emit = defineEmits(["close", "success"]);
const closert = () => {
  emit("close");
};
const success = () => {
  emit("success", {
    dikjxzx: dikjxzx.value,
    zb: zb.value,
  });
};

nextTick(() => {
  window.AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
    var poiPicker = new PoiPicker({
      //city:'北京',
      input: "pickerInput",
    });

    //初始化poiPicker
    poiPickerReady(poiPicker);
  });
});

function poiPickerReady(poiPicker) {
  var map = new window.AMap.Map("container", {
    zoom: 10,
  });
  window.poiPicker = poiPicker;

  var marker = new window.AMap.Marker();

  var infoWindow = new window.AMap.InfoWindow({
    offset: new window.AMap.Pixel(0, -20),
  });

  //选取了某个POI
  poiPicker.on("poiPicked", function (poiResult) {
    var source = poiResult.source,
      poi = poiResult.item,
      info = {
        source: source,
        id: poi.id,
        name: poi.name,
        location: poi.location.toString(),
        address: poi.address,
      };

    marker.setMap(map);
    infoWindow.setMap(map);

    marker.setPosition(poi.location);
    infoWindow.setPosition(poi.location);
    const jkxcer = poiResult.item;

    dikjxzx.value = jkxcer.district + jkxcer.address;
    zb.value = jkxcer.location.lat + "," + jkxcer.location.lng;
    // infoWindow.setContent(
    //   "店铺地址: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
    // );
    // infoWindow.open(map, marker.getPosition());

    map.setCenter(marker.getPosition());
  });

  poiPicker.onCityReady(function () {
    poiPicker.suggest("美容美发");
  });
}
</script>
<style>
#container {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-size: 13px;
}
</style>
<style scoped>
.lxcxfrerer {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 100;
  width: 400px;
}

.kxzczfsdrfsdf {
  position: absolute;
  left: 0px;
  top: 10px;
  right: 0;
  margin: auto;
  width: 400px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}
</style>